<template>
    <div class="clear" style="height:10vh">
        <div class="logo">
            <img src="../../assets/logo.png" alt="">
        </div>
        <el-menu style="width:80rem ; float:left" router :default-active="this.$route.path" class="el-menu-demo"
            mode="horizontal" background-color="#545B6D" text-color="#fff" active-text-color="#ffd04b">
            <el-menu-item index="/guanliHome/shouye">首页</el-menu-item>
            <el-menu-item index="/guanliHome/dingdan" v-if="menu.includes('订单管理')">订单</el-menu-item>
            <el-submenu index="2" v-if="menu.includes('客户管理')">
                <template slot="title">客户管理</template>
                <el-menu-item index="/guanliHome/yonghuguanli">用户管理</el-menu-item>
                <el-menu-item index="/guanliHome/chezhuka">车主卡</el-menu-item>
                <el-menu-item index="/guanliHome/sijiguanli">司机管理</el-menu-item>
            </el-submenu>
            <el-menu-item index="/guanliHome/youHuiQuan" v-if="menu.includes('优惠券管理')">优惠券</el-menu-item>

            <el-submenu index="3" v-if="menu.includes('内容管理')">
                <template slot="title">内容</template>
                <el-menu-item index="/guanliHome/pingpai">品牌管理</el-menu-item>
                <el-menu-item index="/guanliHome/foursdian">4s店</el-menu-item>
                <el-menu-item index="/guanliHome/xiulidian">修理厂</el-menu-item>
                <el-menu-item index="/guanliHome/kuaixiudian">快修厂</el-menu-item>
            </el-submenu>
            <el-submenu index="4" v-if="menu.includes('保险管理')">
                <template slot="title">保险</template>
                <el-menu-item index="/guanliHome/baodan">保单管理</el-menu-item>
                <el-menu-item index="/guanliHome/baoXianGongsi">保险公司管理</el-menu-item>
            </el-submenu>
            <el-menu-item index="/guanliHome/guanlipingjia" v-if="menu.includes('评价管理')">评价</el-menu-item>
            <el-menu-item index="/guanliHome/tuikuan" v-if="menu.includes('退款管理')">退款</el-menu-item>
            <el-submenu index="5" v-if="menu.includes('设置')">
                <template slot="title">设置</template>
                <el-menu-item index="/guanliHome/rightsMng">管理员</el-menu-item>
                <el-menu-item index="/guanliHome/sendMsg">推送消息</el-menu-item>
                <el-menu-item index="/guanliHome/city">城市管理</el-menu-item>
            </el-submenu>
        </el-menu>
        <div class="right">
            <span>亲爱的{{user.user_name}}，您好！</span>
            <el-button type="goon" @click="tuichu">退出</el-button>
        </div>
    </div>
</template>

<script>
    import * as api from "../../utils/api";
    import utils from "../../utils/utils"
    import {
        mapActions
    } from 'vuex'
    export default {
        data() {
            return {
                path: this.$route.path,
                // black: true,
                // white: false
                user: '',
                menu: ''
            }
        },
        created() {

            this.user = this.$store.state.msgCount.user
            this.menu = this.user.menu
        },
        methods: {
            ...mapActions(['outlogin']),
            tuichu() {
                this.axios({
                    url: api.GET_EXIT,
                    method: 'get',
                    params: {

                    }
                }).then(data => {
                    // console.log(data)
                    if (data.data.code === 200) {
                        this.outlogin()
                        utils.removeStorage('user')
                        this.$message({
                            type: 'success',
                            message: '成功退出!'
                        });
                        this.$router.push("/login");
                    }
                })
            },
        },
        created() {

            this.user = this.$store.state.msgCount.user
            this.menu = this.user.menu
        },
    }
</script>
<style>
    @import url('../../assets/font/icon/iconfont.css');
</style>
<style lang="less" scoped>
    .logo {
        width: 15rem;
        float: left;
        height: 4rem;
        padding: 0.5rem;
        line-height: 5rem;
    }

    @font-face {
        font-family: luoyaya;
        src: url("../../assets/luoyaya.ttf");
    }

    .el-menu {
        border-bottom: 0 !important;
    }

    img {
        height: 4rem;
    }

    .niuniu {
        display: inline-block;
        padding: .2rem;
        margin-left: 1rem;
    }

    .niuniu:hover {
        color: #F77F54;
    }

    /* 下拉菜单距离顶部的高度 */
    .el-menu--popup-bottom-start {
        margin-top: 0;
    }

    /* 下拉菜单的宽度 */
    .el-menu--collapse .el-menu .el-submenu,
    .el-menu--popup {
        min-width: 12rem;
        /* text-align: center; */
    }

    /* 下拉菜单文字样式 */

    .el-menu--horizontal .el-menu .el-menu-item {
        font-size: 1.6rem;
        height: 30px;
        line-height: 30px;
    }

    /deep/.el-submenu__title {
        font-size: 1.6rem !important;
    }

    .el-menu-item {
        font-family: luoyaya;
        font-size: 1.6rem;
    }

    .el-menu-item:hover,
    .el-submenu :hover {
        background-color: rgb(112, 121, 146) !important;
    }


    .right {
        float: right;
        width: 25rem;
        height: 5rem;
        line-height: 5rem;
    }

    .right>span {
        font-size: 1.6rem;
        margin-right: 2rem;
        color: aliceblue;
    }

    /* 重置按钮 */
    .el-button--goon:hover {
        color: rgb(255, 208, 75);
        background-color: rgb(255, 241, 201);
        border-color: rgb(255, 208, 75);
    }

    .el-button--goon {
        height: 3rem;
        padding: 0.7rem;
        font-size: 1.2rem;
        color: rgb(255, 241, 201);
        background-color: rgb(255, 208, 75);
        border-color: rgb(255, 208, 75);
    }
</style>